<template>
  <div class="wiring">
    <div class="wiring-title">{{title}}</div>
    <div class="wiring-con">
      <div class="svg" style="width:100%;height:100%">
        <!-- <iframe
        name="myiframe"
          class="svg"
          src="/iframe.html"
          border="none"
          frameborder="0"
          style="width:100%;height:100%"
        />-->
        <iframe
          class="svg"
          :src="svgUrl"
          border="none"
          frameborder="0"
          style="width:100%;height:100%"
        />
      </div>

      <el-dialog :title="dialogData.jgmc" :visible.sync="dialogVisible" top="10vh" width="80%">
        <div class="mi-container">
          <MulianInterval v-if="dialogVisible" :dialogData="dialogData" />
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import MulianInterval from "./MulianInterval/index.vue";

@Component({ components: { MulianInterval } })
export default class wiring extends Vue {
  dialogVisible: boolean = false;
  dialogData = {};
  title: string | (string | null)[] = "";
  // private updated() {
  //   if (this.$router.currentRoute.query.prjName) {
  //     // this.title = this.$router.currentRoute.query.prjName;
  //   } else {
  //     this.$router.push({
  //       path: "/homepage",
  //     });
  //   }
  // }
  // private created() {
  //   this.title = this.$router.currentRoute.query.prjName;
  // }
  // handleClose() {
  //   this.dialogVisible = false;
  // }

  private svgUrl = "";
  mounted() {
    this.setIframeFn();
  }
  beforeDestroy() {
    this.clearIframeFn();
  }
  setIframeFn() {
    this.clearIframeFn();
    window.addEventListener("message", this.IframeFn);
  }
  clearIframeFn() {
    window.removeEventListener("message", this.IframeFn);
  }
  IframeFn(event) {
    console.log(123, event.data);
    let data = event.data || {};
    if (data.type==='showPop') {
      this.dialogVisible = true;
      this.dialogData = data;
    }
  }
  @Watch("$route", { immediate: true })
  changeEvent() {
    this.setSvg();
  }
  setSvg() {
    if (this.$route.query.stationId) {
      let stationId = this.$route.query.stationId;
      let type = "一次接线图";
      let form = {
        stationId: stationId,
        menuName: type,
      };
      (this as any).$services
        .queryDwUrl({ data: form, method: "get" })
        .then((result: any) => {
          // console.log("获取绘图图片地址:", result);
          let data = result.data;
          this.svgUrl = data;
        })
        .catch((err: object) => {
          console.log(err);
        });
    }
  }
}
</script>

<style lang="scss" scoped>
.wiring {
  width: 100%;
  height: 100%;
  padding: 0.24rem;
  &-title {
    text-align: center;
    font-size: 0.2rem;
    line-height: 0.5rem;
  }
  &-con {
    width: 100%;
    height: calc(100% - 0.48rem);
    // background-color: black;
  }
  .mi-container {
    width: 100%;
    height: 70vh;
  }
}
</style>

